<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>让子弹飞播放器-多视角弹幕聚合播放器</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入 DPlayer 播放器 CSS-->
    <link href="./dplayer/DPlayer.min.css" rel="stylesheet">
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .admin-setting {
            display: none; /* 默认隐藏管理员设置 */
        }
    </style>
</head>
<body>
    <!-- Toast 消息容器 -->
    <div id="toast-container" class="toast-container"></div>
    
    <div class="container">
        <header class="app-header">
            <h1>让弹幕飞播放器 - 多视角弹幕聚合</h1>
            <p class="subtitle">支持多视角同步观看，聚合各大平台弹幕，提供沉浸式直播体验</p>
        </header>
        
        <!-- 主控制面板 -->
        <section class="control-section">
            <h2 class="section-title">控制面板</h2>
            <div class="control-panel">
                <div class="control-group">
                    <label for="admin-password">管理员密码</label>
                    <input type="text" id="admin-password-input" placeholder="请输入管理员密码" value="f360967847">
                    <button id="admin-password-set-btn">打开设置</button>
                </div>
                
                <div class="control-group admin-setting" id="barragefly-ws-group">
                    <label for="barragefly-ws-address-input">BarrageFly-WS通信地址</label>
                    <div class="input-with-button">
                        <input type="text" id="barragefly-ws-address-input" placeholder="ws://localhost:9898">
                        <button id="barragefly-ws-address-set-btn">连接</button>
                    </div>
                </div>
                
                <div class="control-group">
                    <label for="stream-url">主播放器直播流地址</label>
                    <input type="text" id="stream-url" placeholder="输入直播流地址" value="">
                    <div class="button-group">
                        <button id="play-btn" class="btn-primary">播放</button>
                        <button id="pause-btn" class="btn-secondary" style="display:none;">暂停</button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 状态指示器 -->
        <section class="status-section">
            <h2 class="section-title">系统状态</h2>
            <div class="status-indicators">
                <div class="status-item">
                    <span class="status-label">弹幕消息转发器:</span>
                    <span class="status-value" id="forwarder-connection-status">未连接</span>
                </div>
                <div class="status-item">
                    <span class="status-label">弹幕聚合服务器:</span>
                    <span class="status-value" id="connection-status">未连接</span>
                </div>
                <div class="status-item">
                    <span class="status-label">弹幕数:</span>
                    <span class="status-value" id="danmu-count">0</span>
                </div>
                <div class="status-item">
                    <span class="status-label">房间数:</span>
                    <span class="status-value" id="room-count">0</span>
                </div>
            </div>
        </section>

        <!-- 多视角播放器布局 -->
        <section class="player-section">
            <h2 class="section-title">多视角播放器</h2>
            <div class="multi-view-layout">
                <!-- 主播放器区域 -->
                <div class="main-player-section">
                    <div class="section-header">
                        <h3>主视角</h3>
                    </div>
                    <div class="player-container main-player">
                        <div class="player-content">
                            <div id="dplayer"></div>
                            <div class="danmu-container" id="danmu-container"></div>
                        </div>
                    </div>
                </div>
                <!-- 右侧副播放器区域 -->
                <div class="side-players-section">
                    <div class="section-header">
                        <h3>其他视角</h3>
                        <button id="add-side-player-btn" class="btn-small btn-primary">+ 添加</button>
                    </div>
                    <div class="side-players-container" id="side-videos-container">
                        <!-- 动态添加的副播放器 -->
                    </div>
                </div>
            </div>
        </section>

        <!-- 弹幕和任务管理 -->
        <section class="management-section">
            <h2 class="section-title">控制中心</h2>
            <div class="management-panel">
                <div class="panel-section">
                    <div class="section-header">
                        <h3>弹幕控制</h3>
                    </div>
                    <div class="control-grid">
                        <div class="control-item">
                            <label>显示区域</label>
                            <div class="button-group">
                                <button id="full-screen-danmu" class="btn-small active">全屏</button>
                                <button id="half-screen-danmu" class="btn-small">半屏</button>
                                <button id="third-screen-danmu" class="btn-small">1/3屏</button>
                            </div>
                        </div>
                        <div class="control-item">
                            <label>速度 (<span id="speed-value">150</span>px/s)</label>
                            <input type="range" id="speed-control" min="50" max="800" value="150" step="10">
                        </div>
                        <div class="control-item">
                            <label>透明度 (<span id="opacity-value">0.8</span>)</label>
                            <input type="range" id="opacity-control" min="0.1" max="1" value="0.8" step="0.1">
                        </div>
                        <div class="control-item">
                            <label>字体 (<span id="font-size-value">20</span>px)</label>
                            <input type="range" id="font-size-control" min="12" max="40" value="20" step="1">
                        </div>
                        <div class="control-item">
                            <button id="toggle-danmu-btn" class="btn-secondary">隐藏弹幕</button>
                            <button id="clear-btn" class="btn-warning">清空弹幕</button>
                        </div>
                    </div>
                </div>

                <div class="panel-section admin-setting">
                    <div class="section-header">
                        <h3>任务管理</h3>
                    </div>
                    <div class="task-management">
                        <label>任务ID (格式: id[roomId][备注])</label>
                        <div class="input-with-button">
                            <input type="text" id="task-id-input" placeholder="1234[6][梁海鹏]" value="1234[6][梁海鹏]">
                            <button id="add-task-btn" class="btn-primary">添加</button>
                        </div>
                        <div class="task-list-container">
                            <select multiple id="task-id-list" size="4"></select>
                            <button id="remove-task-btn" class="btn-warning">删除选中</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 消息日志 -->
        <section class="log-section">
            <h2 class="section-title">消息日志</h2>
            <div class="message-log-panel">
                <div class="panel-header">
                    <div class="log-tabs">
                        <button class="log-tab active" data-tab="all">所有日志</button>
                        <button class="log-tab" data-tab="error">错误日志</button>
                        <button class="log-tab" data-tab="danmu">弹幕日志</button>
                        <button id="toggle-floating-log" class="log-float-btn" title="悬浮显示弹幕日志">
                            📢 悬浮显示
                        </button>
                    </div>
                    <button id="clear-log-btn" class="btn-small btn-warning">清空日志</button>
                </div>
                <div class="message-log-container">
                    <div class="message-log active" id="message-log-all">
                        <div class="message message-system">系统准备就绪，等待连接...</div>
                    </div>
                    <div class="message-log" id="message-log-error">
                        <!-- 错误日志将在这里显示 -->
                    </div>
                    <div class="message-log" id="message-log-danmu">
                        <!-- 弹幕日志将在这里显示 -->
                    </div>
                </div>
            </div>
        </section>
        <div id="floating-danmu-log" class="floating-danmu-log">
            <div class="floating-log-header" id="floating-log-header">
                <span class="floating-log-title">📢 实时弹幕日志</span>
                <div class="floating-log-controls">
                    <button id="minimize-floating-log" title="最小化">−</button>
                    <button id="close-floating-log" title="关闭">×</button>
                </div>
            </div>
            <div class="floating-log-content" id="floating-log-content">
                <!-- 悬浮日志内容将在这里显示 -->
            </div>
            <!-- 大小调整手柄 -->
            <div class="floating-log-resize-handle floating-log-resize-right"></div>
            <div class="floating-log-resize-handle floating-log-resize-bottom"></div>
            <div class="floating-log-resize-handle floating-log-resize-bottom-right"></div>
        </div>
        <!-- 底部状态栏 -->
        <footer class="footer-bar">
            <div class="footer-info">
                <span>服务器: <span id="server-url">未设置</span></span>
                <span>任务: <span id="task-ids">无</span></span>
                <span>版本: v1.4.3</span>
            </div>
            <div class="footer-links">
                <a href="https://github.com/OrdinaryRoad-Project/ordinaryroad-barrage-fly" target="_blank">Barrage Fly</a>
                <a href="https://github.com/fgh1995/Barrage-Fly-Player" target="_blank">播放器项目</a>
            </div>
        </footer>
    </div>

    <!-- 添加播放器模态框 -->
    <div id="add-player-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加其他视角</h3>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="player-remark">视角备注</label>
                    <input type="text" id="player-remark" placeholder="例如: 主播A视角">
                </div>
                <div class="form-group">
                    <label for="player-stream-url">直播流地址</label>
                    <input type="text" id="player-stream-url" placeholder="输入直播流地址">
                </div>
            </div>
            <div class="modal-footer">
                <button id="confirm-add-player" class="btn-primary">确认添加</button>
                <button id="cancel-add-player" class="btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 引入依赖 -->
    <script src="./dplayer/flv.min.js"></script>
    <script src="./dplayer/hls.min.js"></script>
    <script src="./dplayer/DPlayer.min.js"></script>
    <script src="./danmaku/danmaku.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="app.js"></script>
</body>
</html>